<template>
    <el-drawer
    :title="this.$t('titles.waypointList')"
    :visible.sync="drawer"
    :close-on-press-escape="false"
    custom-class="waypointList"
    :wrapperClosable="closable"
    :show-close="showClose"
    :direction="direction"
    @close="closeDrawer">
        <div class="flex waypointsBox">
            <!-- 站点列表 -->
            <el-input
            :placeholder="this.$t('placeholder.waypointName')"
            v-model="input"
            class="searchInput"
            @input="InputChange"
            clearable>
            </el-input>
            <div class="flex dignoseItem" v-for="(item,index) in waypoints" :key="index">
                <div class="iconImg"></div>
                <div class="name" @click="showStationDetailBtn(item.name)">{{item.name}}</div>
                <div class="itemDel flex" @click="delWaypointBtn(item.name)" v-show="!develop">
                    <el-button type="text" :disabled="develop"><i class="el-icon-delete iconDel"></i></el-button>
                </div>
            </div>
        <div class="flex formBtns">
            <el-button  type="primary" @click="addStation">{{ this.$t("buttons.addWaypoint")}}</el-button>
        </div>
        </div>
    </el-drawer>
</template>

<script>
import { hideOtherModule, showStationDetail, clickAddStation, verifyAuthorization } from '../js/methods'
import { showWaypointList, showWaypoint, deleteWaypoint, showWaypointDetail } from '../js/waypoint'
export default {
    name: 'stationsComponent',
    components:{

    },
    data(){
        return{
            drawer: this.$store.state.waypointsModule,
            direction: 'btt',
            closable: true,
            showClose: false,

            input: "",
            waypoints: [],
            waypointsList: [],
            develop: false
        }
    },
    methods:{
        //输入框change
        InputChange(){
            let that = this;
            if(that.input){
                that.waypoints = [];
                for(var i in that.waypointsList){
                    if(that.waypointsList[i].name.indexOf(that.input) >= 0){
                        that.waypoints.push(that.waypointsList[i])
                    }
                }
            }else{
                that.waypoints = that.waypointsList;
            }
        },

        //点击指定站点显示详情
        showStationDetailBtn(name){
            this.drawer = false;
            showWaypointDetail(true, name);
        },

        //点击删除站点
        delWaypointBtn(name){
            const that = this;
            if(that.develop){return}
            that.drawer = false;
            that.$confirm(`是否永久删除${name}站点?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true,
                customClass: "delBranchCustom"
            }).then(() => {
                deleteWaypoint(name);
            }).catch(() => {
                          
            });
        },

        //点击添加站点
        addStation:function(){
            const that = this;
            showWaypointList(false);
            showWaypoint(true);
        },

        //关闭模态框
        closeDrawer: function(){
            showWaypointList(false)
        }
    },

    //属性监听
    watch:{
        "$store.state.waypointsModule": function(val){
           this.drawer = val;
        },
       '$store.state.stationList':function(val){
           this.waypoints = val;
           this.waypointsList = val;
       },
       
       '$store.state.userRole':function(val){
            switch(val){
                case 'developer':
                    this.develop = false;
                break;

                case 'Administrator':
                    this.develop = true;
                break;
                
                default:
                break;
            }
        }
    }

}
</script>

<style scoped lang="less">
 .waypointsBox{
     width: 100%;
     padding: 0 15px;
     flex-direction: column;
 }

 .dignoseItem{
     width: 100%;
     justify-content: space-between;
     border-bottom: 1px solid #eeeeee;
     padding: 3px 0;
     color: #3f86fe;
     .iconImg{
         flex: 1;
         height: 35px;
         background: url('../../src/assets/icon-newBranch-sel.png') no-repeat center;
         background-size: 55%;
     }
     .name{
         flex: 7;
         padding-left: 1em;
         font-size: 16px;
         line-height: 35px;
         height: 35px;
     }
     .itemDel{
         flex: 1;
         height: 35px;
         .iconDel{
             font-size: 16px;
             color: #3f86fe;
         }
     }
 }
 .formBtns{
     width: 100%;
     margin-top: 15px;
     button{
         width: 100%;
     }
 }
 .searchInput{
     margin-bottom: 10px;
 }
</style>